<script setup>
import {ref} from "vue";
import router from "../router.js";
import {getLoginPageImages} from "@/api/image.js";
const imageurl=ref([
    'https://tse1-mm.cn.bing.net/th/id/OIP-C.lrQKZJLlrFpgUIcSFpbpcAHaEK?w=273&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    'https://th.bing.com/th/id/R.e6d1302099a1f29923ee023febd2ba1e?rik=02uIcOh5ag1jaQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f71%2f8471.jpg&ehk=EXjfKevw0MmzhZwy1RV%2b79gugxZVNloDE9%2fU0AKvvpk%3d&risl=&pid=ImgRaw&r=0',
    'https://th.bing.com/th/id/R.1aed7f19dad5f368ae9dfd846ec29751?rik=qlzg%2bFkwjp7uAg&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f72%2f2272.jpg&ehk=rGXRA237YZVe%2bQFJc8vMg9GAPLT9hUv8aFF0Ty9vfaQ%3d&risl=&pid=ImgRaw&r=0',
    'https://tse2-mm.cn.bing.net/th/id/OIP-C.0tOf13Hj9OYJkkSiRe_-WAHaE6?w=221&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    'https://tse1-mm.cn.bing.net/th/id/OIP-C.QAMyRow6--Q8Xna-YD74IwHaEO?w=298&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',

])
//获取轮播图信息
const getLoginPageImgList = async () => {
  let result = await getLoginPageImages('主页')
  if (result.code == 200) {
    //如果成功 先清空imageurl
    imageurl.value = []
    result.date.forEach((item,index) => {
      imageurl.value.push(item.imgUrl)
    })
  }
}
getLoginPageImgList()

const imageurl1 = ref('https://img.ixintu.com/download/jpg/202004/3162b20419ec35b188348ef55bcf21ac_800_1422.jpg!con0');

const Toboard=async ()=>{
 await router.push("/board")
}
const Tooderfood=async ()=>{
  await router.push("/orderfood")
}
const Touserdetails=async ()=>{
  await router.push("/personalInfo")
}
const Torecharge=async ()=>{
  await router.push("/RechargeCard")
}

const gotoLoginPage= ()=>{
   router.push("/login")
}
</script>

<template>
  <div class="background">
    <div></div>
    <div></div>
  </div>
  <div class="common-layout">
    <el-container  class="index-container">

      <el-container>
        <div class="header-container">
          <el-header class="header-text">
            <div>
              <div class="header-title">
                <div class="header-title-content">网咖天地</div>
              </div>
              <div class="headerRightContent">
                <el-button type="primary" plain @click="gotoLoginPage">登录其他账号</el-button>
              </div>
            </div>

          </el-header>
        </div>
        <section>
          <div class="skewed"></div>
        </section>
        <el-main class="main-content my-main-content">
          <div class="block text-center image-content">
            <el-carousel height="300px" type="card"  motion-blur>
              <el-carousel-item v-for="(imageurl, index) in imageurl" :key="index" >
                <img :src="imageurl" :alt="'Image ' + (index + 1)" style="width: 100%; height: 100%;" />
              </el-carousel-item>
            </el-carousel>
          </div>

          <el-row :gutter="20" class="el-row">
            <el-col :span="6" :offset="6" >
<!--              <el-button type="primary" round class="index-button" @click="Toboard">上机</el-button>-->
              <div class="drop" @click="Toboard">
                <h2>上机</h2>
              </div>
            </el-col>
          <el-col :span="6" :offset="2" class="el-col">
<!--            <el-button type="success" round  class="index-button" @click="Tooderfood">点餐</el-button>-->
            <div class="drop1" @click="Tooderfood">
              <h2>点餐</h2>
            </div>
          </el-col>
        </el-row>
          <el-row :gutter="20" class="el-row">
            <el-col :span="6" :offset="6">
<!--              <el-button type="warning" round  class="index-button" @click="Torecharge">充值</el-button>-->
              <div class="drop2" @click="Torecharge">
                <h2>充值</h2>
              </div>
            </el-col>
            <el-col :span="6" :offset="2">
<!--              <el-button type="danger" round  class="index-button" @click="Touserdetails">设置</el-button>-->
              <div class="drop3" @click="Touserdetails">
                <h2>设置</h2>
              </div>
            </el-col>
          </el-row>
        </el-main>
        <el-footer class="el-index-footer">

        </el-footer>
      </el-container>
    </el-container>
    <img src="../assets/wave.svg">
<!--    <div class="page-footer">-->
      <div class="footer-content">
            <span>
          网咖天地 版权所有 © 2024 - 2025 Created by ❤️️️网咖天地开发四人小组
        </span>
        <br/>
        <span>
          --本项目开源于
        <a href="https://gitee.com/wktdstudy/wktd-vue.git" class="footer-a">Gitee仓库</a>
        </span>
      </div>
<!--    </div>-->
  </div>


</template>



<style scoped>
.background {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 1300px;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #fcfcfc, #63b6d9);
  display: flex;
  flex-grow: 1;
  z-index: -1;
}

.background div {
  position: absolute;
  border-radius: 100%;
  height: 0;
  filter: blur(240vw);
  opacity: 0.4;
}

.background div:nth-child(1) {
  background: linear-gradient(132deg, #62a7a2 0.00%, #7a538d 100.00%);
  width: 30%;
  padding-top: 30%;
  left: 71%;
  top: 20%;
  transform: translateX(-50%) translateY(-50%);
}

.background div:nth-child(2) {
  background: linear-gradient(132deg, #c78389 0.00%, #a85155 100.00%);
  width: 77%;
  padding-top: 77%;
  left: 96%;
  top: 39%;
  transform: translateX(-50%) translateY(-50%);
}

.skewed {
  /*margin-top: 50px;*/
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: #2c3e50;*/
  background: #93afcc;
  z-index: 0;
  transform: skewY(26deg);
  transform-origin: top right;
}
.page-footer {
  width: 100%;
  height: 200px;
  background-color: #939393;
}
.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666;
  background-color: #e7e7e7;
  z-index: 10000;
  height: 64px;
  position: relative;
  /*bottom: 0;*/
}
.el-row {
  margin-bottom: 20px;
height: 140px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.grid-content ep-bg-purple{
  background-color: white;
}
.index-container{
  /*height: 650px;*/
width: 1200px;
  margin-left: 200px;


}
.el-index-footer{
 height: 0px;
}
.index-button{
  width: 295px;
  height: 150px;

}
.header-container {
  /*display: flex;*/
  /*justify-content: center; !* 在水平方向上居中显示 *!*/
  /*align-items: center; !* 在垂直方向上居中显示 *!*/
  /*height: 100px; !* 根据您的需求设置高度 *!*/
  /*background-color: rgba(0,0,0,0.08);*/
  width: 1200px;
  height: 100px;
  z-index: 999;
  border-radius: 5px;
  box-shadow: #6b778c;
}

.header-text {
  /*font-family: "Your_Artistic_Font", sans-serif; !* 使用您的艺术字体 *!*/
  /*font-size: 52px; !* 设置字体大小 *!
  font-weight: 8000;*/
  /*height: 500px;*/
  height: 100px;
  position: fixed;
  z-index: 99999;
}

.headerRightContent {
  position: relative;
  z-index: 99999;
  left: 1000px;
  top: -50px;
}
.main-content {
  margin-top: 310px;
  height: 500px;
}
.header-title-content {
  z-index: 99999;
  position: relative;
  left: 500px;
}
.image-content {
  width: 1550px;
  position: absolute;
  top: 80px;
  right: 5px;
  left: 0px;
}
.header-title {
  z-index: 99999;
  font-size: 54px;
  font-weight: 18000;
  font-family: "Arial Narrow";
  /*color: white;*/
  position: relative;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /*top: -200px;*/
}
.my-main-content {
  /*display: flex;*/
}

.drop {
  z-index: 999;
  position: relative;
  /*  width: 350px;
    height: 350px;*/
  width: 250px;
  height: 250px;
  box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05),
  25px 35px 20px rgba(0,0,0,0.05),
  25px 30px 30px rgba(0,0,0,0.05),
  inset -20px -20px 25px rgba(0,0,0,0.05);
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 73% 27% 25% 75% / 57% 47% 53% 43% ;
}
.drop:hover {
  /*border-radius: 46% 54% 43% 57% / 57% 47% 53% 43% ;*/
  border-radius: 50%;
}
.drop::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 85px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  /*background: #31cbd0;*/
  opacity: 0.9;
}
.drop::after {
  content: '';
  position: absolute;
  top: 90px;
  left: 110px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.9;
}

.drop1 {
  z-index: 999;
  position: relative;
  width: 250px;
  height: 250px;
  box-shadow: inset 20px 20px 20px rgba(64,138,211,0.05),
  25px 35px 20px rgba(64,138,211,0.1),
  25px 30px 30px rgba(64,138,211,0.1),
  inset -20px -20px 25px rgba(255,255,255,0.5);
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 78% 22% 73% 27% / 41% 35% 65% 59%;
  background: #408ad3;
}
.drop1:hover {
  border-radius: 39% 61% 18% 82% / 49% 17% 83% 51% ;
}
.drop1::before {
  content: '';
  position: absolute;
  top: 70px;
  left: 25px;
  width: 35px;
  height: 35px;
  border-radius: 82% 18% 75% 25% / 78% 15% 85% 22%  ;
  background: #86b5e3;
  /*background: #31cbd0;*/
  opacity: 0.9;
}
.drop1::after {
  content: '';
  position: absolute;
  top: 90px;
  left: 65px;
  width: 15px;
  height: 15px;
  background: #a0c1e7;
  border-radius: 50%;
  opacity: 0.9;
}

.drop2 {
  z-index: 999;
  margin-top: 50px;
  position: relative;
  width: 250px;
  height: 250px;
  box-shadow: inset 20px 20px 20px rgba(238, 33, 245,0.05),
  25px 35px 20px rgba(238, 33, 245,0.1),
  25px 30px 30px rgba(238, 33, 245,0.1),
  inset -20px -20px 25px rgba(238, 33, 245, 0.5);
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 41% 59% 44% 56% / 71% 73% 27% 29% ;
  background: #EE21F57F;
}
.drop2:hover {
  border-radius: 25% 75% 27% 73% / 80% 18% 82% 20% ;
}
.drop2::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 85px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #d08bef;
  opacity: 0.9;
}
.drop2::after {
  content: '';
  position: absolute;
  top: 90px;
  left: 110px;
  width: 15px;
  height: 15px;
  background: #cb81ee;
  border-radius: 50%;
  opacity: 0.9;
}

.drop3 {
  z-index: 999;
  margin-top: 50px;
  position: relative;
  width: 250px;
  height: 250px;
  box-shadow: inset 20px 20px 20px rgba(161,254,99,0.05),
  25px 35px 20px rgba(161,254,99,0.1),
  25px 30px 30px rgba(161,254,99,0.1),
  inset -20px -20px 25px rgba(161,254,99,0.5);
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 44% 56% 44% 56% / 25% 41% 59% 75% ;
  /*background: #aafd72;*/
  background: rgba(170,253,144,0.7);
}
.drop3:hover {
  border-radius: 33% 67% 71% 29% / 39% 78% 22% 61%  ;
}
.drop3::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 65px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #bbec9e;
  opacity: 0.9;
}
.drop3::after {
  content: '';
  position: absolute;
  top: 65px;
  left: 55px;
  width: 15px;
  height: 15px;
  background: #c1e5ad;
  border-radius: 50%;
  opacity: 0.9;
}
</style>